{% extends "./template.html" %}

{% block body %}
<div class="d-flex justify-content-center" id="alert-box" style="z-index:1060">
    <div class="alert d-none" id="alert" style="width:100%;z-index:1060">
        <h6 class="alert-heading">提示</h6>
        <p class="alert-body"></p>
    </div>
</div>
<div class="pb-3 pt-3 fixed-top" style="background:#fff;">
    <div class="container">
        <a href="/?user_id={{user_id}}" class="btn btn-sm btn-outline-info">回首页</a>
        <button type="button" id="add-btn" class="btn btn-sm btn-outline-primary">新增标签</button>
        <a href="/post?user_id={{user_id}}" class="ml-2 btn btn-sm btn-outline-primary">创建文章</a>
    </div>
</div>
<div class="modal fade" id="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                <button type="button" class="close" id="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="email" class="form-control" id="title" aria-describedby="emailHelp">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancel">关闭</button>
                <button type="button" class="btn btn-primary" id="submit-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="pt-5">
<h5>
    标签：
</h5>
<ul class="list-group">
    {% if tags.length>0 %}
    {% for tag in tags %}
    <li class="list-group-item d-flex justify-content-between">
        <span>{{ tag.title }}</span>
        <button type="button" data-tag="{{tag.id}}" class="btn btn-danger">删除</button>
    </li>

    {% endfor %}
    {% else %}
    暂无标签
    {% endif %}
</ul>
</div>
<div class="modal-backdrop fade" id="backdrop" style="display:none"></div>
{% endblock %}
{% block script %}
<script src="/script/index.js"></script>
<script type="module">
    window.onload = () => {

        let submitBtn = document.querySelector('#submit-btn');
        let addBtn = document.querySelector('#add-btn');
        let modal = document.querySelector('#modal');
        let backdrop = document.querySelector('#backdrop');

        addBtn.addEventListener('click', () => {
            modal.classList.add('show')
            modal.style.display = 'block'
            backdrop.classList.add('show')
            backdrop.style.display = 'block'
        })
        let closeBtn = document.querySelector('#close');
        let cancelBtn = document.querySelector('#cancel');


        closeBtn.addEventListener('click', closeModal)
        cancelBtn.addEventListener('click', closeModal)

        submitBtn.addEventListener('click', () => {
            let title = document.querySelector('#title').value;
            if (title == '') {
                checkMsg({ msg: '标题不能为空', type: 'danger' })
                return;
            }
            let tag = {
                title,
                user_id: '{{user_id}}'
            }
            let token = localStorage.getItem('token');
            $.ajax({
                headers: {
                    'Authorization': token
                },
                type: 'POST',
                url: `/api/tag`,
                data: tag,
                success: (res) => {
                    if (res.status == 401) {
                        checkMsg({ msg: res.msg, type: 'warning' }, () => {
                            window.location.href = '/login'
                        })
                    } else {
                        checkMsg({ msg: '发布成功', type: 'success' }, () => {
                            location.reload()
                        })
                    }
                }
            })

        })

        let deleteBtns = document.querySelector('.list-group').querySelectorAll('.btn')
        let token = localStorage.getItem('token');
        deleteBtns.forEach(el => {
            el.addEventListener('click', e => {
                let tag_id = e.target.dataset.tag;
                $.ajax({
                    headers: {
                        'Authorization': token

                    },
                    type: 'POST',
                    url: `/api/tag/delete`,
                    data: {
                        tag_id
                    },
                    success: (res) => {
                        // location.reload();
                        if (res.status == 401) {
                            checkMsg({ msg: res.msg, type: 'warning' }, () => {
                                window.location = '/login'
                            })
                        } else {
                            checkMsg({ msg: '删除成功', type: 'success' }, () => {
                                window.location = '/?user_id={{user_id}}'
                                location.reload()
                            })
                        }
                    }
                })
            })
        })

        function closeModal() {

            modal.classList.remove('show')
            backdrop.classList.remove('show')
            modal.style.display = 'none'
            backdrop.style.display = 'none'
        }
    }
</script>
{% endblock %}